<template>
    <!-- 气泡图 -->
        <div id="mainpto"></div>

</template>

<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
            plantCap: [
                { name: '很安心', value: 9 },
                { name: '细心', value: 11 },
                { name: '很好', value: 5 },
                { name: '很喜欢', value: 7 },
                { name: '暖暖的', value: 8 },
                { name: '非常好', value: 4 },
                { name: '孩子喜欢', value: 7 },
                { name: '态度好', value: 14 },
                { name: '很干净', value: 4 }
            ],
        }
    }, 
    mounted() {
        this.demo();
        window.addEventListener('resize', () => {
            if (this.myChart) {
                this.myChart.resize();
            }
        });
},
    methods: {
        demo() {
            var myChart = echarts.init(document.getElementById('mainpto'));
            var positions = this.Getarry(this.plantCap.length);
            var datas = this.plantCap.map((item, index) => {
                // 生成随机颜色
                const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
                // Math.random()* 16777215：将随机数扩展到0到16777215之间，对应于十六进制的#000000到#FFFFFF。
                // Math.floor(...)：对扩展的后数向下取整
                // .toString(16)：将整数转换为十六进制字符串。
                // #${...}：将生成的十六进制字符串前加上#符号，形成颜色，$引入变量
                // ^v^

                return {
                    name: `${item.value * 10}\n${item.name}`,
                    value: positions[index],
                    symbolSize: item.value * 16,
                    label: {
                        normal: {
                            textStyle: {
                                fontSize: this.value * 3
                                // 把字体大小设置成动态的，固定的在value太小的时候会显示不全
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: color,
                            opacity: 0.8
                        }
                    },
                };
            });
            var option = {
                grid: {
                    show: false,
                    top: 10,
                    bottom: 10
                },
                xAxis: [{
                    gridIndex: 0,
                    type: 'value',
                    show: false,
                    min: 0,
                    max: 100,
                    nameLocation: 'middle',
                    nameGap: 5
                }],
                yAxis: [{
                    gridIndex: 0,
                    min: 0,
                    max: 100,
                    show: false,
                    nameLocation: 'middle',
                    nameGap: 30
                }],
                series: [{
                    type: 'scatter',
                    symbol: 'circle',
                    label: {
                        normal: {
                            show: true,
                            formatter: '{b}',
                            color: '#fff',
                            textStyle: {
                                fontSize: '20'
                            }
                        },
                    },
                    itemStyle: {
                        normal: {
                            color: '#00acea'
                        }
                    },
                    data: datas}]
            };myChart.setOption(option);
        },
        Getarry(count) {
            // 生成随机但间隔至少为20的位置数组
            let positions = [];
            for (let i = 0; i < count; i++) {
                let overlap, x, y;
                // for循环嵌套dowhile
                do {
                    overlap = false;
                    // random随机数
                    x = Math.random() * 80 ;
                    y = Math.random() * 80 ;
                    // 检查是否重合
                    for (let pos of positions) {
                        if (Math.abs(pos[0] - x) < 20 && Math.abs(pos[1] - y) < 20) {
                            overlap = true;
                            break;
                        }
                    }
                } while (overlap);
                // 添加二位数组到数组里，伪二维数组
                positions.push([x, y]);
            }
            // 返回数组
            return positions;
        }
    }
}
</script>

<style lang="less" scoped>
#mainpto {
    width: 60vh;
    height: 65vh;
    flex: 1;
    border-radius: 10px;
    background-color: rgb(218, 255, 255);
  }
</style>